<script lang="ts" setup>
import { Ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTestStore } from '@/store'
const { BoxTheme } = useTestStore()
const router = useRouter()
type Plate = {
  name: string
  route: string
  selected: boolean
  theme: string
}
const plates: Ref<Array<Plate>> = ref([
  {
    name: '商城',
    route: '/mall',
    selected: false,
    theme: 'redTheme'
  },
  {
    name: '社区',
    route: '/community',
    selected: false,
    theme: 'blueTheme'
  },
  {
    name: '交流',
    route: '/chat',
    selected: false,
    theme: 'blueTheme'
  },
  {
    name: '我的',
    route: '/chat',
    selected: false,
    theme: 'blueTheme'
  }
])
watch(
  () => router.currentRoute.value.matched[0],
  (matched) => {
    if (undefined === matched) {
      return
    }
    plates.value.forEach((plate) => {
      plate.selected = false
      if (plate.route === matched.path) {
        plate.selected = true
        BoxTheme.currentTheme = BoxTheme[plate.theme as keyof typeof BoxTheme]
      }
    })
  },
  { immediate: true, deep: true }
)
const plateClick = (item: Plate) => {
  plates.value.forEach((plate) => {
    plate.selected = false
  })
  item.selected = true
  BoxTheme.currentTheme = BoxTheme[item.theme as keyof typeof BoxTheme]
  const currentRoutePath = router.currentRoute.value.matched[0].path
  if (currentRoutePath === item.route) {
    return
  }
  router.push({
    path: item.route,
    replace: true
  })
}
import { EllipsisHorizontal } from '@vicons/ionicons5'
const showMenu = ref(true)
</script>

<template>
  <n-float-button :bottom="'32px'" :right="'32px'" position="fixed" menu-trigger="click" v-model:show-menu="showMenu">
    <n-icon>
      <EllipsisHorizontal />
    </n-icon>
    <template #menu>
      <n-float-button
        :class="item.selected ? 'n-float-button-theme' : 'n-float-button-unTheme'"
        v-for="item in plates"
        :key="item.name"
        width="88px"
        height="36px"
        @click="plateClick(item)"
      >
        <span :class="item.selected ? 'plateClick' : ''">{{ item.name }}</span>
      </n-float-button>
    </template>
  </n-float-button>
  <router-view />
</template>

<style scoped lang="scss">
.plateClick {
  font-weight: bold;
  color: white;
}

.n-float-button {
  justify-content: center;
  z-index: 4021;
}

.n-float-button-theme {
  background-color: v-bind('BoxTheme.currentTheme.fontColor');
}

.n-float-button-unTheme {
  background-color: white;
}

.container > .n-float-button {
  background-color: v-bind('BoxTheme.currentTheme.fontColor');
  color: white;
}
</style>
